<template>
  <div class="main">
    <div class="personal">
      <span @click="returnMe">&lt;</span>
      <span>个人资料</span>
    </div>
    <div class="data">
      <ul>
        <li>
          <span>头像</span>
          <span>&gt;</span>
          <img src="../../static/image/aa.jpg">
        </li>
        <li>
          <span class="item">昵称</span>
          <span>&gt;</span>
          <span>kubianandroid</span>
        </li>
        <li>
          <span class="item">性别</span>
          <span>&gt;</span>
          <span>保密</span>
        </li>
        <li>
          <span class="item">生日</span>
          <span>&gt;</span>
          <span>未选择</span>
        </li>
        <li>
          <span class="item">地区</span>
          <span>&gt;</span>
          <span>中国</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    returnMe(){
      this.$router.push('/me')
    }
  }
}
</script>

<style>
html,body {
  height: 100%;
  padding: 0;
  margin: 0;
}
 ul li{
   list-style: none;
 }
 ul{
   padding: 0;
 }
 .main{
   height: 100%;
   width: 100%;
 }
  .main .personal{
    width: 100%;
    height: 5%;
    text-align: center;
  }
  .main .data{
    height: 95%;
  }
 .main .personal span:nth-child(1){
   float: left;
   font-size: 20px;
 }
 .main .data img{
   height: 50px;
   width: 50px;
   border-radius: 50%;
   position: relative;
   top: 50%; /*偏移*/
   left:75%;
   transform: translateY(-50%);
 }
.main .data ul{
  height: 100%;
}
 .main .data li{
   height: 10%;
   width: 100%;
   border: 1px solid #f6f6f6;
 }
.main .data .item{
  position: relative;
  top: 35%; /*偏移*/
}
 .main .data li span:nth-child(2),
 .main .data li span:nth-child(3){
   position: relative;
   top: 50%; /*偏移*/
   transform: translateY(-50%);
   float: right;
 }


</style>